<script>
import { BASE_URL } from "@/util/Config.js";
export default {
  data() {
    return {
      serviceData: null, // 仅存储服务数据（重点获取serviceBodyImg）
      isLoading: true,
      error: ""
    };
  },
  methods: {
    // 拼接完整图片路径（处理相对路径）
    getFullBodyImgUrl() {
      if (!this.serviceData?.serviceBodyImg) return "";
      // 避免路径拼接时出现重复斜杠
      const relativePath = this.serviceData.serviceBodyImg;
      return BASE_URL + (relativePath.startsWith('/') ? '' : '/') + relativePath;
    },

    async fetchBodyImg() {
      try {
        this.isLoading = true;
        this.error = "";

        // 请求服务详情（仅为了获取serviceBodyImg）
        const response = await fetch(BASE_URL + '/servicesdetail', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ serviceId: this.$route.params.id })
        });

        if (!response.ok) throw new Error(`请求失败：${response.status}`);
        const result = await response.json();
        this.serviceData = result.data || null;

      } catch (error) {
        this.error = "图片加载失败";
        console.error('获取图片失败：', error);
      } finally {
        this.isLoading = false;
      }
    }
  },
  mounted() {
    // 确保有服务ID才请求
    if (this.$route.params.id) {
      this.fetchBodyImg();
    } else {
      this.error = "缺少服务ID";
      this.isLoading = false;
    }
  }
};
</script>

<template>
  <div class="body-img-viewer">
    <!-- 加载状态 -->
    <div v-if="isLoading" class="loading">
      <div class="spinner"></div>
      <p>加载图片中...</p>
    </div>

    <!-- 错误状态 -->
    <div v-if="error && !isLoading" class="error">
      {{ error }}
    </div>

    <!-- 图片展示区（核心） -->
    <div v-if="!isLoading && !error && serviceData?.serviceBodyImg" class="img-container">
      <img
          :src="getFullBodyImgUrl()"
          alt="服务详情图"
          class="body-img"
          @error="error = '图片无法显示'"
      >
    </div>

    <!-- 无图片状态 -->
    <div v-if="!isLoading && !error && !serviceData?.serviceBodyImg" class="no-img">
      暂无详情图片
    </div>
  </div>
</template>

<style scoped>
.body-img-viewer {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 15px;
}

/* 加载状态 */
.loading {
  text-align: center;
  padding: 50px 0;
}

.spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 4px solid #f0f0f0;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 错误提示 */
.error {
  color: #dc3545;
  text-align: center;
  padding: 20px;
  background-color: #fef0f0;
  border-radius: 4px;
}

/* 图片容器 */
.img-container {
  margin: 20px 0;
}

/* 核心：服务详情图片样式 */
.body-img {
  width: 100%;
  max-width: 100%;
  height: auto; /* 保持宽高比 */
  object-fit: contain; /* 完整显示图片，不裁剪 */
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* 无图片提示 */
.no-img {
  text-align: center;
  padding: 50px 0;
  color: #999;
  background-color: #f9f9f9;
  border-radius: 8px;
}
</style>